<template>
  <div style="height: 100vh; padding: 20px; overflow-y: auto">
    <div class="text-center text-3xl mt-2">
      {{ obj.title }}
    </div>
    <div v-for="o in obj.content" :key="o" class="mt-4">
      <p v-if="o.type === 'TEXT'" v-html="o.value"></p>
      <img v-if="o.type === 'IMG'" :src="o.value" class="avatar" />
      <video v-if="o.type === 'VIDEO'" :src="o.value" class="avatar" controls></video>
      <div v-if="o.type === 'FILE'">
        <el-row>
          <el-col :span="8">
            <svg
              t="1710072564934"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="41812"
              width="60"
              height="60"
            >
              <path
                d="M136.533604 0.00026a49.119975 49.119975 0 0 0-35.839982 15.359992C91.307627 25.600247 85.33463 38.40024 85.33463 51.200234v921.599532a49.119975 49.119975 0 0 0 15.359992 35.839982 50.545974 50.545974 0 0 0 35.839982 15.359992h750.931619a49.119975 49.119975 0 0 0 35.839981-15.359992 50.546974 50.546974 0 0 0 15.359993-35.839982V290.134113L648.533344 0.00026z"
                fill="#4D97FF"
                p-id="41813"
              ></path>
              <path
                d="M938.666197 290.133113H699.733318a52.492973 52.492973 0 0 1-51.199974-51.199974V0.00026z"
                fill="#A5D2FF"
                p-id="41814"
              ></path>
              <path
                d="M290.591526 454.240029h112.614943l52.542973 98.57895c4.814998 8.947995 16.375992 12.549994 25.884987 8.065996a18.399991 18.399991 0 0 0 9.673995-10.460995 17.121991 17.121991 0 0 0-1.069-13.849992L432.363454 428.013043a19.46499 19.46499 0 0 0-17.205991-10.009995H260.832541a19.64599 19.64599 0 0 0-16.174992 8.236996 17.130991 17.130991 0 0 0-1.513999 17.160991l154.319921 325.693834a19.37899 19.37899 0 0 0 16.780992 10.723995 19.61199 19.61199 0 0 0 17.709991-9.299995l187.499905-316.28584H732.763301L607.050365 719.460895l-39.57798-74.363963c-4.820998-8.940995-16.374992-12.540994-25.884987-8.065995a18.399991 18.399991 0 0 0-9.671995 10.460994 17.120991 17.120991 0 0 0 1.069 13.849993l57.87897 108.555945a19.85599 19.85599 0 0 0 34.836983-0.729l154.326921-325.699834a17.129991 17.129991 0 0 0-1.438999-17.231991A19.64799 19.64799 0 0 0 762.381286 418.000048H608.123365a19.53299 19.53299 0 0 0-16.857992 9.299995L417.080462 721.290894z"
                fill="#FFFFFF"
                p-id="41815"
              ></path>
            </svg>
          </el-col>
          <el-col :span="16">{{ o.value }}</el-col>
        </el-row>
      </div>
      <audio v-if="o.type === 'AUDIO'" :src="o.value" controls></audio>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';

import { useRouter } from 'vue-router';

const { proxy } = getCurrentInstance();
const router = useRouter();
const obj = ref({});
onMounted(async () => {
  // 打印
  let id = 0;

  id = router.currentRoute.value.query.id;
  const result = await proxy.$ax.get(`/5001/api/Memos/Get/${id}`);
  obj.value = result;
  obj.value.content = JSON.parse(obj.value.content);
  console.log(obj.value);
});
</script>
<style scoped lang="less"></style>
